<template>
  <!-- 5 底部统计 父传子 -->
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ count }}</strong></span
    >
    <ul class="filters" @click="chageFn">
      <li>
        <!-- 6.2 点谁谁亮(高亮显示)--动态class设置 \ 绑定点击事件-->
        <a
          :class="{ selected: isSel === 'all' }"
          href="javascript:;"
          @click="isSel = 'all'"
          >全部</a
        >
      </li>
      <li>
        <a
          :class="{ selected: isSel === 'no' }"
          href="javascript:;"
          @click="isSel = 'no'"
          >未完成</a
        >
      </li>
      <li>
        <a
          :class="{ selected: isSel === 'yes' }"
          href="javascript:;"
          @click="isSel = 'yes'"
          >已完成</a
        >
      </li>
    </ul>
    <!-- 7.1 给清除已完成绑定点击事件 -->
    <button class="clear-completed" @click="cleFn">清除已完成</button>
  </footer>
</template>

<script>
// 6 底部数据切换
// 6.1  定义一个变量
export default {
  data() {
    return {
      isSel: "all",
    };
  },
  props: ["farr"],
  // 计算属性 统计数据
  computed: {
    count() {
      return this.farr.length;
    },
  },
  // 6.3 点击 后 list 切换数据 (子 传 父)
  methods: {
    chageFn() {
      //通过事件委托的方式给ul绑定点击事件
      // 6.4 将类型字符串传给父组件
      this.$emit("changeType", this.isSel);
    },
    cleFn() {
      this.$emit("clear");
    },
  },
};
// 7 清除已完成
</script>